<template>
	<div class="swiper siz-swiper">
      <ol class="siz swiper-wrapper">
        <li v-for="item in sizList" :key="item.id" class="swiper-slide" >
			<router-link to="/">
				<img :src="item.imgURL" />
				<p>{{item.name}}</p>
			</router-link>
		</li>
      </ol>
    </div>
</template>

<script>
//1.引入vue周期函数
import { onMounted } from 'vue';
//2.引入Swiper的动态组件
import Swiper , {
	Autoplay,
	EffectCoverflow,
	EffectCube,
	Pagination,
} from 'swiper';
//3.swiper组件应用配置
Swiper.use([ Autoplay , EffectCoverflow , EffectCube , Pagination ]);

//
export default{
	name:'Siz',
	props:['propssiz'],
	data(){
		return{
			sizList:[],
		}
	},
	setup(){
		onMounted( ()=>{ 
			new Swiper( '.siz-swiper' , {
				slidesPerView : 4
			} )
		} )
	},
	watch:{
		propssiz(){
			this.sizList = this.propssiz;
		}
	}
}
</script>

<style scoped>
a{
	text-decoration: none;
	color: black;
}
.siz{
	padding: 0.3rem 0;
}
.siz li{
	float: left;
	width: 20%;
	text-align: center;
}
.siz li img{
	width: 0.8rem;
	height: 0.8rem;
}
</style>
